<script setup lang="ts">
import { Document } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  contont: {
    type: String,
    default: ""
  },
  hide: {
    type: Boolean,
    default: false
  }
});
const title = ref(props.title ?? "");
const show = ref(props.show ?? false);
const textarea1 = ref(props.contont ?? "");
let $emit = defineEmits(["deletes"]);
const deletes = () => {
  ElMessageBox.confirm("请确认是否删除？", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      $emit("deletes");
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
</script>

<template>
  <div class="w-full p-[10px] bg-slate-100 mb-[10px]">
    <div class="flex items-center justify-between">
      <div class="flex !w-1/2 items-center">
        <el-icon class="mr-[10px]"><Document /></el-icon>
        <el-input
          v-model="title"
          placeholder="请输入标题"
          v-show="show"
        ></el-input>
        <el-text
          class="mx-1 font-medium whitespace-break-spaces"
          v-show="!show"
          >{{ title }}</el-text
        >
      </div>
      <div>
        <el-button type="primary" link v-show="!show" @click="show = !show"
          >编辑</el-button
        >
        <el-button type="primary" link v-show="show" @click="show = !show"
          >确认</el-button
        >
        <el-button type="primary" link @click="deletes">删除</el-button>
        <slot name="btn"></slot>
      </div>
    </div>
    <div class="ml-[27px]" v-if="!props.hide">
      <el-input
        v-model="textarea1"
        autosize
        type="textarea"
        placeholder="请输入内容"
        v-show="show"
        class="mt-[15px]"
      />
      <el-text class="mx-1 whitespace-break-spaces" v-show="!show">{{
        textarea1
      }}</el-text>
    </div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped></style>
